<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>加载</title>
    <link href="less/Black.ico" rel="shortcut icon" />
    <style>
        html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

    </style>
    <style>
        .loader-container {
            height: 6px;
            width: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -3px;
            margin-left: -300px;
            background-color: transparent;
            background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: linear-gradient(left, #5bd8ff, #ff0000);
            box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
            border-radius: 3px 0 0 3px;
        }
        .loader-container:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            margin-top: -0.5em;
            margin-right: -1em;
            background-image: -webkit-linear-gradient(top, #000000, #212121);
            background-image: -moz-linear-gradient(top, #000000, #212121);
            background-image: -o-linear-gradient(top, #000000, #212121);
            background-image: -ms-linear-gradient(top, #000000, #212121);
            background-image: linear-gradient(top, #000000, #212121);
        }
        .loader-container.done:after {
            background: Red;
        }
        .run .runner {
            content: "";
            position: absolute;
            right: 0;
            height: 100%;
            width: 0%;
            background-color: transparent;
            background-image: -webkit-linear-gradient(top, #000000, #212121);
            background-image: -moz-linear-gradient(top, #000000, #212121);
            background-image: -o-linear-gradient(top, #000000, #212121);
            background-image: -ms-linear-gradient(top, #000000, #212121);
            background-image: linear-gradient(top, #000000, #212121);
            animation: loader 5s linear;
        }
        .meter {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 2em;
            margin-top: .3em;
            color: #ff0000;
            animation: meter 5s linear;
            text-shadow: 0 -1px 0 #333333;
        }
        .meter:after {
            content: "%";
        }
        @keyframes loader {
            0% {
                width: 100%;
            }
            100% {
                width: 0%;
            }
        }
        @keyframes meter {
            0% {
                color: #5bd8ff;
            }
            100% {
                color: #ff0000;
            }
        }
        /* Decoration */
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            font-family: 'Exo', sans-serif;
            background: transparent url('') repeat;
        }
        footer {
            font-family: 'Give You Glory', cursive;
            position: absolute;
            bottom: 2em;
            right: 1em;
            color: #777;
            font-size: 1.2em;
        }
        footer a {
            text-decoration: none;
            color: #777;
            border: none;
        }
        #wrapper {
            width: 600px;
            margin: 0 auto;
        }
    </style>
    <script src="js/prefixfree.min.js"></script>
    <script src="js/modernizr.js"></script>
    <link rel="stylesheet" href="css/shine.css" media="screen" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div class="loader-container">
        <div class="meter">0</div>
        <span class="runner"></span>
    </div>
</div>
<div class="wrap">
    <div class="bg">
        <div class="loading">
            <span class="title">loading</span>
            <span class="text">loading</span>
        </div>
    </div>
</div>
<input type="hidden" name="path"     id="path"   value="<%=request.getContextPath()%>" />
<script src="js/index.js?0.4"></script>
<script src="js/jquery-2.0.3.js"></script>
</body>

</html>
